import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {AdminItemType} from "../../../script/frame/dataSource/DataModel";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import PageContent, {PageContentType} from "../component/PageContent";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {InputStr} from "../../../script/type/Type";
import {AdminBarInterface} from "../../interface/GuiInterface";
import {publicGui} from "../../interface/PublicGui";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

interface IProp {
    pageContentType: PageContentType;
}
interface IState {
    title: string,
    des: string,
    x: number,
    y: number,
    infoVisible: boolean,
}


export default class AdminBar extends AdminBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,

            title: '',
            des: '',
            x: 0,
            y: 0,
            infoVisible: false,
        }
    }

    render = () => {
        let maxLen = 0;
        const allAchDatas = DataRouter.getAchievementDatas();
        if (allAchDatas.length > maxLen) {
            maxLen = allAchDatas.length;
        }
        const allItemDatas = DataRouter.getItemDatas();
        if (allItemDatas.length > maxLen) {
            maxLen = allItemDatas.length;
        }
        const allAbilityDatas = DataRouter.getAbilityDatas();
        if (allAbilityDatas.length > maxLen) {
            maxLen = allAbilityDatas.length;
        }


        let adminItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.adminGuiItemMaps);

        const iconSize = { h: 0.0581, w: 0.04375 }
        const onePageNum = 30;

        return <PageContent  type={this.props.pageContentType} closeFun={this.close} hidden={!this.state.visible}   key={GuiKeys.pageContentAdmin} selectItemMap={adminItems} onePageNum={onePageNum} elementsFun={
            (selectKey: AdminItemType) => {
                let eles = [];
                if (selectKey === AdminItemType.ach) {
                    for (let i = 0; i < maxLen; i ++) {
                        const achData = allAchDatas[i];
                        let ele;
                        if (achData) {
                            const iconPath = achData?.iconPath;
                            const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                            const image = resourceData?.src;
                            ele =  <View   key = {`${GuiKeys.adminBarItem}|${i}`} onMouseDown={ () => { return this.click(InputStr.ach, achData.id) }} onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, achData.id, achData.name) }} onMouseLeave={this.closeInfoPage} style={{ backgroundImage: image, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}></View>
                        } else {
                            ele =  <View key = {`${GuiKeys.adminBarItem}|${i}`}     style={{ hidden: true }}></View>
                        }
                        eles.push(ele)
                    }
                } else if (selectKey === AdminItemType.item) {
                        for (let i = 0; i < maxLen; i ++) {
                            const itemData = allItemDatas[i];
                            let ele;
                            if (itemData) {
                                const image = DataRouterUtil.getIconUrlByIconData(itemData);
                                ele =  <View key = {`${GuiKeys.adminBarItem}|${i}`} onMouseDown={ () => { return this.click(InputStr.good, itemData.id) }} onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, itemData.id, itemData.Name) }} onMouseLeave={this.closeInfoPage}   style={{ backgroundImage: image, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}></View>
                            } else {
                                ele =  <View key = {`${GuiKeys.adminBarItem}|${i}`}     style={{ hidden: true }}></View>
                            }
                            eles.push(ele)
                        }
                } else if (selectKey === AdminItemType.ability) {
                    for (let i = 0; i < maxLen; i ++) {
                        const abilityData = allAbilityDatas[i];
                        let ele;
                        if (abilityData) {
                            const image = DataRouterUtil.getIconUrlByIconData(abilityData);
                            ele =  <View key = {`${GuiKeys.adminBarItem}|${i}`} onMouseDown={ () => { return this.click(InputStr.ability, abilityData.id) }} onMouseEnter={(event) => { this.showInfoPage(event.x + iconSize.w, event.y, abilityData.id, abilityData.Name) }} onMouseLeave={this.closeInfoPage}   style={{ backgroundImage: image, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}></View>
                        } else {
                            ele =  <View key = {`${GuiKeys.adminBarItem}|${i}`}     style={{ hidden: true }}></View>
                        }
                        eles.push(ele)
                    }
                }
                return eles;
            }
        }>
        </PageContent>
    }

    showInfoPage = (x: number, y: number, title: string, des: string) => {
        publicGui.showInfoPage(x, y, title, undefined, des);
    }

    click = (name: string, value: string) => {
        const syncData: UISyncData = { id: SyncId.doActionByStr, param: { name: name, value: value } };
        return syncData
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.adminBar } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        this.setState({
            ...this.state,
            visible: true,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}